<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
  <link rel="shortcut icon" href="../images/bilibili-logo.ico">

  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <!-- 最上方的搜索栏 -->
  <div class="top-box">
    <img class="logo" src="../images/batman-logo-03.jpg" alt="">

    <div class="find">
      <img src="../images/sousuo.svg" alt="">
      <input type="text" placeholder="体脂率搜索表"></input>
    </div>

    <img class="icon" src="../images/shoubing.svg" alt="">
    <img class="icon" src="../images/youxiang.svg" alt="">

  </div>

  <!-- 导航栏 -->
  <div class="nav">

    <div>直播</div>
    <div class="active">
      推荐
      <div class="active-bar"></div>
    </div>
    <div>热门</div>
    <div>动画</div>
    <div>影视</div>
    <div>新征程</div>
    <div>
      <img src="../images/caidan.svg" alt="">
    </div>

  </div>

  <!-- 主体内容区域 -->
  <div class="main">

    <!-- 大图模式 -->
    <div class="big-box">
      <img src="../images/bataman0001.jpg" alt="">
      <div>黑暗骑士</div>
    </div>

    <!-- 小图模式 -->
    <div class="small-box">

      <div>
        <img class="main-img" src="../images/bataman0004.jpg" alt="">
        <div>
          <div class="l1">黑暗骑士</div>
          <div class="l2">

            <div>
              <img src="../images/upzhu.svg" alt="">
              <span>一觉醒来发生啥</span>
            </div>

            <img src="../images/gengduo.svg" alt="">

          </div>
        </div>
      </div>

      <div>
        <img class="main-img" src="../images/bataman0002.jpg" alt="">
        <div>
          <div class="l1">4月2日信息差</div>
          <div class="l2">

            <div>
              <img src="../images/upzhu.svg" alt="">
              <span>早八晨读</span>
            </div>

            <img src="../images/gengduo.svg" alt="">

          </div>
        </div>
      </div>

    </div>

    <!-- 小图模式 -->
    <div class="small-box">

      <div>
        <img class="main-img" src="../images/bataman-04.jpg" alt="">
        <div>
          <div class="l1">北美运动学博士...</div>
          <div class="l2">

            <div>
              <img src="../images/upzhu.svg" alt="">
              <span>运动学博士</span>
            </div>

            <img src="../images/gengduo.svg" alt="">

          </div>
        </div>
      </div>

      <div>
        <img class="main-img" src="../images/bataman-03.jpg" alt="">
        <div>
          <div class="l1">暗黑世界因与果试玩</div>
          <div class="l2">

            <div>
              <img src="../images/upzhu.svg" alt="">
              <span>一只来自mc的小猪</span>
            </div>

            <img src="../images/gengduo.svg" alt="">

          </div>
        </div>
      </div>

    </div>

    <!-- 小图模式 -->
    <div class="small-box">

      <div>
        <img class="main-img" src="../images/bataman0001.jpg" alt="">
        <div>
          <div class="l1">40岁如何健身</div>
          <div class="l2">

            <div>
              <img src="../images/upzhu.svg" alt="">
              <span>一个跑者</span>
            </div>

            <img src="../images/gengduo.svg" alt="">

          </div>
        </div>
      </div>

      <div>
        <img class="main-img" src="../images/bataman0006.jpg" alt="">
        <div>
          <div class="l1">PC版本最后生还者2</div>
          <div class="l2">

            <div>
              <img src="../images/upzhu.svg" alt="">
              <span>MC</span>
            </div>

            <img src="../images/gengduo.svg" alt="">

          </div>
        </div>
      </div>

    </div>


  </div>



  <!-- 下方的菜单栏 -->
  <div class="bottom-menu">

    <div>
      <img src="../images/shouye.svg" alt="">
      <div class="active">首页</div>
    </div>

    <div>
      <img src="../images/fengche.svg" alt="">
      <div>动态</div>
    </div>

    <div class="add-box">
      +
    </div>

    <div>
      <img src="../images/huiyuagou.svg" alt="">
      <div>会员购</div>
    </div>

    <div>
      <img src="../images/bilibili.svg" alt="">
      <div>我的</div>
    </div>


  </div>




</body>

</html>